<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/console1.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }
    </style>
</head>
<body class="pear-container" style="">
<form class="layui-form" action="" onsubmit="return false">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <label class="layui-form-label" style="display:none">id</label>
                    <div class="layui-input-block" style="display:none">
                        <input type="text" th:value="${id}" id="id" name="id" autocomplete="off"
                               placeholder="请输入id" class="layui-input">
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label required">档号</label>
                        <div class="layui-input-inline">
                            <input type="text" th:value="${reference}" name="reference" required lay-verify="required"
                                   autocomplete="off"
                                   placeholder="请输入档号"
                                   class="layui-input" lay-reqtext="档号为必填项">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">档案ID</label>
                        <div class="layui-input-inline">
                            <input type="text" th:value="${file_id}" name="fileId" lay-verify="required"
                                   autocomplete="off"
                                   placeholder="请输入档案ID"
                                   class="layui-input" lay-reqtext="档案ID为必填项">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">档案名</label>
                        <div class="layui-input-inline">
                            <input type="text" th:value="${file_name}" name="fileName" required lay-verify="required"
                                   autocomplete="off"
                                   placeholder="请输入档案名"
                                   class="layui-input" lay-reqtext="档案名为必填项">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">案卷号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="fileNo" th:value="${file_no}" lay-verify="required"
                                   autocomplete="off"
                                   placeholder="请输入案卷号"
                                   class="layui-input" lay-reqtext="案卷号为必填项">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">年度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="year" th:value="${year}" autocomplete="off" lay-verify="required"
                                   lay-reqtext="年度为必填项"
                                   class="layui-input" id="selectTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">保管期限</label>
                        <div class="layui-input-inline">
                            <select name="retentionPeriod" lay-verify="required" lay-search>
                                <option value="0" th:selected="0 eq ${retention_period}">永久</option>
                                <option value="1" th:selected="1 eq ${retention_period}">长期</option>
                                <option value="2" th:selected="2 eq ${retention_period}">短期</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">借阅状态</label>
                        <div class="layui-input-inline">
                            <select name="status" lay-verify="required" lay-search>
                                <option value="0" th:selected="false eq ${status}">未借出</option>
                                <option value="1" th:selected="true eq ${status}">已借出</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">录入时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" th:value="${entry_time}" autocomplete="off" lay-verify="required"
                                   lay-reqtext="录入时间为必填项" name="entryTime" id="entryTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">责任人</label>
                        <div class="layui-input-inline">
                            <select name="userName" lay-verify="required" lay-reqtext="责任人为必填项" lay-search>
                                <option value="">请选择责任人</option>
                                <option th:each="item,stat:${myUserList}" th:value="${item.userName}"
                                        th:selected="${user_name} eq ${item.userName}" th:text="${item.userName}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">档案属性</label>
                        <div class="layui-input-inline">
                            <select name="fileAttributeId" lay-verify="required" lay-reqtext="档案属性为必填项" lay-search>
                                <option value="">请选择档案属性</option>
                                <option th:each="item,stat:${fileAttributeList}" th:value="${item.id}"
                                        th:selected="${file_attribute_id} eq ${item.id}" th:text="${item.fileAttributeName}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">归档类型</label>
                        <div class="layui-input-inline">
                            <select name="archivedTypeId" lay-verify="required" lay-reqtext="归档类型为必填项" lay-search>
                                <option value="">请选择归档类型</option>
                                <option th:each="item,stat:${archivedTypeList}" th:value="${item.id}"
                                        th:selected="${archived_type_id} eq ${item.id}"  th:text="${item.archivedName}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">选择机柜</label>
                        <div class="layui-input-inline">
                            <select name="number" lay-search lay-filter="cabinetChange" lay-verify="required"
                                    lay-reqtext="机柜为必填项">
                                <option value="">请选择机柜</option>
                                <option th:each="dict:${hostList}" th:value="${dict.number}" th:text="${dict.number}"
                                        th:selected="${number} eq ${dict.number}"  >
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">档案简介</label>
                        <div class="layui-input-block">
                            <textarea name="profile"  th:value="${profile}"  placeholder="请输入档案简介" class="layui-textarea"
                                      style="min-height: 65px!important;"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">层</label>
                        <div class="layui-input-inline">
                            <input type="number" name="layer" th:value="${current_layer}" id="layer" oninput="checkLayerVal()" autocomplete="off"
                                   placeholder="请输入档案层"
                                   class="layui-input">
                        </div>
                        <label class="layui-form-label">列</label>
                        <div class="layui-input-inline">
                            <input type="number" name="column" th:value="${current_column}" id="column" oninput="checkColumnVal()" autocomplete="off"
                                   placeholder="请输入档案列"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="manageSave">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:inline="javascript">
    var numberOfLayers = parseInt([[${numberOfLayers}]]);
    var numberOfColumns = parseInt([[${numberOfColumns}]]);
    var $ = layui.jquery;

    //验证是否超过最大值
    function checkLayerVal() {
        let val = $("#layer").val();
        if (val > numberOfLayers) {
            val = numberOfLayers;
        } else if (val <= 1) {
            val = 1;
        }
        $("#layer").val(val);
    }

    //验证是否超过最大值
    function checkColumnVal() {
        let val = $("#column").val();
        if (val > numberOfColumns) {
            val = numberOfColumns;
        } else if (val <= 1) {
            val = 1;
        }
        $("#column").val(val);
    }

    layui.use(['form', 'jquery', 'laydate'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;

        laydate.render({
            elem: '#selectTime' //指定元素
            , theme: '#393D49',
            type: 'year'
        });
        laydate.render({
            elem: '#entryTime' //指定元素
            , theme: '#393D49',
            type: 'datetime'
        });


        form.on('submit(manageSave)', function (data) {
            console.log(data.field)
            let loading = layer.load();
            $.ajax({
                url: '/file/manage/edit/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 200) {
                        layer.msg(result.message, {icon: 1, time: 3000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
                            parent.layui.table.reload("valid");
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000});
                    }
                }
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>
